<template>
    <div class="classify-container">
        <div class="header">
            <!-- <van-icon name="scan" color="#1989fa" /> -->

            <div>分类</div>

            <!-- <el-button type="text">个人中心</el-button> -->
        </div>

        <van-search placeholder="请输入搜索关键词"></van-search>

        <div class="classify-content">
            <div class="classify-aside">
                <div :style="{top: (currentIndex * 50) + 'px'}" class="sign-btn"></div>
                <div
                    class="classify-aside-item"
                    @click="asideBtnClick(item, index)"
                    v-for="(item, index) in asideList" :key="index">
                    {{item.name}}
                </div>
            </div>
            <div class="classify-main">
                <div v-for="(item, index) in goodsList" :key="index" @click="toGoodsDetail(item)" class="classify-main-item">
                    <img :src="item.picUrl" style="width: 100px;height: 100px;" alt="">
                    <span>{{item.name}}</span>
                </div>
                <!-- <div class="classify-main-item">
                    <img :src="smallImg" style="width: 100px;height: 100px;" alt="">
                    <span>商品2</span>
                </div>
                <div class="classify-main-item">
                    <img :src="smallImg" style="width: 100px;height: 100px;" alt="">
                    <span>商品1</span>
                </div>
                <div class="classify-main-item">
                    <img :src="smallImg" style="width: 100px;height: 100px;" alt="">
                    <span>商品2</span>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import request from '../fetch/index.js'
    export default {
        data () {
            return {
                currentIndex: 0,
                asideList: [],
                smallImg: require('../assets/images/small.jpg'),
                goodsList: []
            }
        },
        mounted () {
            this.getData()
        },
        methods: {
            asideBtnClick (item, index) {
                this.currentIndex = index

                this.getDetail(item.id)
            },
            toGoodsDetail (item) {
                console.log(item)
                this.$router.push({
                    path: '/goodsDetail',
                    query: {
                        categoryId: item.id
                    }
                })
            },
            getData () {
                request({
                    url: 'http://192.168.200.251:8888/wx/catalog/index',
                    method: 'get'
                }).then(res => {
                    this.asideList = res.data.data.categoryList
                    this.goodsList = res.data.data.currentSubCategory
                })
            },
            getDetail (id) {
                request({
                    url: 'http://192.168.200.251:8888/wx/catalog/current',
                    method: 'get',
                    params: {
                        id: id
                    }
                }).then(res => {
                    console.log(res)
                    // this.asideList = res.data.data.categoryList
                    this.goodsList = res.data.data.currentSubCategory
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.classify-container {
    display: flex;
    flex-direction: column;
    background: #f2f2f2;
    height: 100%;

    .header {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .classify-content {
        flex: 1;
        display: flex;
        width: 100%;
        height: 100%;
        overflow: hidden;

        .classify-aside {
            position: relative;
            width: 120px;
            height: 100%;
            overflow: auto;

            .sign-btn {
                position: absolute;
                top: 0;
                left: 0;
                width: 2px;
                height: 50px;
                background: #e4393c;
                transition: .2s linear;
            }
            .classify-aside-item {
                width: 100%;
                height: 50px;
                padding-left: 15px;
                line-height: 50px;
                background: #fff;
                border-bottom: 1px solid #ddd;
                box-sizing: border-box;
            }
        }

        .classify-main {
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            flex: 1;
            height: 100%;

            .classify-main-item {
                width: 50%;
                height: 140px;
                padding-top: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                background: #fff;
                border-bottom: 1px solid #ddd;
            }
        }
    }
}
</style>